<template>
  <div class="container">
    <el-dialog :title="title" :visible.sync="addCompanysVisible.isShow" width="50%" @close="closer">
      <el-form
        :model="addCompanyForm"
        :rules="addCompanyRules"
        ref="addCompanyForm"
        label-width="120px"
      >
        <el-form-item label="公司名称" prop="shortName">
          <el-input v-model="addCompanyForm.shortName" style="width: 80%;"></el-input>
        </el-form-item>
        <el-form-item label=" ">
          <el-checkbox label="是否是名企" v-model="addCompanyForm.isFamous"></el-checkbox>
        </el-form-item>
        <el-form-item label="所属公司" prop="company">
          <el-input v-model="addCompanyForm.company" style="width: 80%;"></el-input>
        </el-form-item>
        <el-form-item label=" ">
          <p>https://www.tianyancha.com （在此可查询所属公司全称及简称）</p>
        </el-form-item>
        <el-form-item label="城市地区" prop="city">
          <el-select
            class="right"
            v-model="addCompanyForm.province"
            style="width: 38%;"
            @change="changeRuleProvinces"
            placeholder="请选择"
          >
            <el-option v-for="(item,index) in provinces" :key="index" :label="item" :value="item"></el-option>
          </el-select>
          <el-select v-model="addCompanyForm.city" style="width: 38%;" placeholder="请选择">
            <el-option v-for="(item,index) in citys" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向(企业标签)" prop="tags">
          <el-input v-model="addCompanyForm.tags" style="width: 80%;"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input type="textarea" v-model="addCompanyForm.remarks" style="width: 80%;"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCompanysVisible.isShow = false">取 消</el-button>
        <el-button type="primary" @click="addAnCompanys">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { provinces, citys } from "@/api/hmmm/citys.js";
import { addCompany, editCompany } from "@/api/hmmm/companys.js";
export default {
  data() {
    return {
      addCompanyRules: {
        shortName: [
          { required: true, message: "公司名称不能为空", trigger: "blur" },
        ],
        company: [
          { required: true, message: "所属公司不能为空", trigger: "blur" },
        ],
        city: [
          { required: true, message: "所在地区不能为空", trigger: "blur" },
        ],
        tags: [
          { required: true, message: "公司标签不能为空", trigger: "blur" },
        ],
        remarks: [{ required: true, message: "备注不能为空", trigger: "blur" }],
      },
      provinces: provinces(),
      citys: [],
      replaceForm: {},
      addCompanyForm: {
        isFamous: false,
        shortName: "",
        company: "",
        province: "" || [],
        city: "" || [],
        tags: "",
        remarks: "",
      },
    };
  },
  props: {
    info: {
      type: Object,
      default: () => ({}),
    },
    addCompanysVisible: {
      type: Object,
      required: true,
    },
  },
  watch: {
    info(newValue) {
      if (Object.keys(newValue).length > 0) {
        // 回显操作
        this.addCompanyForm = newValue;
      }
    },
  },
  computed: {
    title() {
      if (this.addCompanyForm.id) {
        return "修改用户";
      } else {
        return "创建用户";
      }
    },
  },
  methods: {
    changeRuleProvinces() {
      this.citys = citys(this.addCompanyForm.province);
    },
    // 关闭dialog处理
    closer() {
      this.addCompanyForm.city = "";
      this.addCompanyForm.province = "";
      this.addCompanyForm.isFamous = false;
      this.$refs.addCompanyForm.resetFields();
    },
    // 添加和修改公司
    async addAnCompanys() {
      this.$refs.addCompanyForm.validate(async (valid) => {
        if (valid) {
          if (!this.addCompanyForm.id) {
            try {
              await addCompany(this.addCompanyForm);
              this.$refs.addCompanyForm.resetFields();
              this.$message.success("添加成功");
            } catch (err) {
              this.$message.error("添加失败");
            }
          } else {
            this.addCompanyForm.isFamous = !!this.addCompanyForm.isFamous;
            try {
              await editCompany(this.addCompanyForm);
              this.$message.success("修改成功");
              this.$refs.addCompanyForm.resetFields();
            } catch (err) {
              this.$message.error("修改失败");
            }
          }
          this.addCompanysVisible.isShow = false;
          this.$emit("getList");
          // this.addCompanysVisible.isShow = false;
        } else {
          return false;
        }
      });
      // this.addCompanysVisible.isShow = false;
    },
  },
};
</script>

<style scoped lang='less'>
.right {
  margin-right: 24px;
}
</style>
